<layout-to-lesson>
  <template v-slot:default="{ currentLessonInfos, selectedLessonIndex }">
    <template v-if="selectedLessonIndex === 0">
      <div :class="$store.state.appPrefix + '-p-course-lesson-intro'" v-loading="isPageLoading">
        <div class="intro-extra">        
          <div class="intro-keys">
            <div class="extra-title">关键词</div>
            <div v-if="currentLessonInfos && currentLessonInfos.keywords" class="extra-inner">
              <el-tag v-for="it in $parseKeywords(currentLessonInfos.keywords)">{{it}}</el-tag>
            </div>
          </div>
          <div class="intro-keys" style="margin-top: 16px; flex: 1;">
            <div class="extra-title">学习附件</div>
            <div v-if="!files || files.length === 0" class="extra-hint">暂无学习附件</div>
            <div  v-else class="extra-files">
              <div class="extra-item" v-for="(it, idx) in currentLessonInfos.files" :key="idx">
                <img class="extra-item-img" :src="getFlieIcon(it)" alt="">
                <div class="extra-item-info">
                  <div class="extra-item-title">{{it.fileName}}</div>
                  <div class="extra-item-content">{{getFileSize(it.fileSize)}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="sales-language">
          <div v-if="currentLessonInfos && currentLessonInfos.salesLanguageMap" class="sales-inner">
            <div v-for="it in $initSalesLanguage(currentLessonInfos.salesLanguageMap)" class="sales-it">
              <div class="language-title">{{it.title}}</div>
              <div class="language-content">{{it.content}}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="selectedLessonIndex === 1">
      <FollowPage :currentLessonInfos="currentLessonInfos" />
    </template>
  </template>
</layout-to-lesson>
